<template>
    <div class="business-promotion">
        <div class="head-box">
            <div class="head-title">活动中心 / 商业促销</div>
        </div>
        <div class="list-box">
            <div class="list-row">
                <div class="img-box">
                    <img :src="false ? '' : img_buf" />
                </div>
                <div class="tag-box">热门</div>
                <div class="activity-box">
                    <div class="activity-title">
                        <span class="title">极速秒杀</span>
                        <span class="tag">多产品</span>
                    </div>
                    <div class="add-but">
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            circle
                            @click="dialogVisible = true"
                        ></el-button>
                    </div>
                </div>
            </div>
            <div class="list-row">
                <div class="img-box">
                    <img :src="false ? '' : img_buf" />
                </div>
                <div class="tag-box">热门</div>
                <div class="activity-box">
                    <div class="activity-title">
                        <span class="title">极速秒杀</span>
                        <span class="tag">多产品</span>
                    </div>
                    <div class="add-but">
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            circle
                            @click="dialogVisible = true"
                        ></el-button>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            width="70%"
            center
            top="5vh"
            class="establish-dialog"
            :before-close="handleCloseAll"
        >
            <div class="activity-establish">
                <div class="preview-box">
                    <div class="iframe-box">
                        <iframe
                            src=""
                            scrolling="auto"
                            frameborder="1"
                        ></iframe>
                    </div>

                    <div class="phone-preview">
                        <el-popover placement="top" width="100" trigger="click">
                            <div class="qr-code">
                                <div class="img-box">
                                    <img :src="false ? '' : img_buf" />
                                </div>
                                <div class="tis-txt">关注公众号体验活动</div>
                            </div>
                            <span slot="reference">手机预览</span>
                        </el-popover>
                    </div>
                </div>
                <div class="explain-box">
                    <div class="explain-title">极速秒杀</div>
                    <div class="explain-doc">
                        <div class="doc-title">活动简介</div>
                        <div class="doc-txt">
                            在秒杀规定的时间内选择产品并支付，支付成功后商家会根据收货地址发货。
                        </div>
                    </div>
                    <div class="case-box">
                        <div class="case-title">参考案例</div>
                        <div class="img-box" @click="seeCaseFun">
                            <img :src="false ? '' : img_buf" />
                        </div>
                    </div>
                    <div class="port-box">
                        <div class="port-title">支持访问端口</div>
                        <div class="port-txt"><span>微信H5</span></div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="createnowFun"
                    >立即创建</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="casedialogVisible"
            width="500px"
            center
            top="5vh"
            :before-close="handleClose"
            :close-on-click-modal="false"
        >
            <div class="case-info-box">
                <div class="case-title">案例: 企业名称</div>
                <div class="tag-box">
                    <span class="tag-row">促进付费转化</span>
                    <span class="tag-row">促进付费转化</span>
                </div>

                <div class="cat-box">
                    <div class="cat-concent">行业: 纺织辅料</div>
                    <div class="cat-concent">场景: 付费转化</div>
                </div>
                <div class="data-num-box">
                    <div class="data-num-title">活动数据:</div>
                    <div class="data-num">浏览人数: 1000+</div>
                    <div class="data-num">参与人数: 1000+</div>
                    <div class="data-num">分享人数: 1000+</div>
                </div>
                <div class="qr-box">
                    <img :src="false ? '' : img_buf" />
                </div>
            </div>
        </el-dialog>
        <ydDialog ref="ydDialog" @handleClose="handleClose"></ydDialog>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import ydDialog from "@/components/interactive/ydDialog";

export default {
    props: [],
    components: { ydDialog },
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            dialogVisible: false, //创建活动
            casedialogVisible: false, //案例
        };
    },
    created() {},
    mounted() {},
    methods: {
        // 关闭所有弹框
        handleCloseAll() {
            this.dialogVisible = false;
            this.casedialogVisible = false;
            this.$refs.ydDialog.yddialogVisible = false;
        },
        // 回到创建活动弹框
        handleClose() {
            this.dialogVisible = true;
        },
        // 查看案例
        seeCaseFun() {
            this.dialogVisible = false;
            this.$refs.ydDialog.yddialogVisible = false;
            setTimeout(() => {
                this.casedialogVisible = true;
            }, 200);
        },
        // 立即创建
        createnowFun() {
            this.dialogVisible = false;
            this.casedialogVisible = false;
            if (false) {
            } else {
                setTimeout(() => {
                    this.$refs.ydDialog.yddialogVisible = true;
                }, 200);
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.qr-code {
    .img-box {
        width: 150px;
        height: 150px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .tis-txt {
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
    }
}
.business-promotion {
    background: #f2f2f2;
    height: 100%;
    .head-box {
        background: #fff;
        padding: 10px;
        .head-title {
            font-size: 18px;
        }
    }

    .list-box {
        height: calc(100% - 52px);
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        .list-row {
            width: 300px;
            height: 230px;
            border-radius: 5px;
            overflow: hidden;
            background: #fff;
            border: 1px #d7d7d7 solid;
            position: relative;
            margin-right: 20px;
            margin-bottom: 20px;
            .img-box {
                width: 100%;
                height: 170px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .tag-box {
                position: absolute;
                right: 0;
                top: 20px;
                color: #fff;
                background: #f39931;
                border-radius: 20px 0 0 20px;
                padding: 3px 15px;
            }
            .activity-box {
                font-size: 14px;
                border-top: 1px #d7d7d7 solid;
                height: calc(100% - 170px);
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .activity-title {
                    .title {
                    }
                    .tag {
                        margin-left: 10px;
                        border-radius: 20px;
                        border: 1px solid #d7d7d7;
                        padding: 3px 10px;
                        color: #999;
                        font-size: 12px;
                        padding-top: 2px;
                    }
                }
            }
            ::v-deep.add-but {
                i {
                    font-weight: bold;
                }
            }
        }
    }
    ::v-deep.dialog-footer {
        .el-button {
            padding: 12px 100px;
            border-radius: 20px;
        }
    }
    ::v-deep .establish-dialog {
        .el-dialog__body {
            padding-bottom: 0;
        }
    }

    .activity-establish {
        display: flex;
        .preview-box {
            margin-right: 30px;
            .iframe-box {
                width: 375px;
                height: 667px;
                border-radius: 5px;
                border: 1px solid #d7d7d7;
                iframe {
                    width: 100%;
                    height: 100%;
                    border: none;
                }
            }

            .phone-preview {
                text-align: center;
                span {
                    cursor: pointer;
                }
            }
        }
        .explain-box {
            .explain-title {
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 50px;
            }
            .explain-doc {
                border-bottom: 1px solid #000;
                padding-bottom: 10px;
                margin-bottom: 10px;
                .doc-title {
                    font-size: 18px;
                    font-weight: bold;
                }
                .doc-txt {
                    color: #aaa;
                }
            }
            .case-box {
                margin-bottom: 10px;
                .case-title {
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                .img-box {
                    width: 100px;
                    height: 120px;
                    border-radius: 5px;
                    overflow: hidden;
                    cursor: pointer;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
            .port-box {
                .port-title {
                    font-size: 16px;
                }
                .port-txt {
                    margin-top: 5px;
                    span {
                        padding: 3px 10px;
                        font-size: 14px;
                        border-radius: 20px;
                        border: 1px solid #d7d7d7;
                    }
                }
            }
        }
    }
    .case-info-box {
        .case-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .tag-box {
            .tag-row {
                border-radius: 20px;
                border: 1px solid #d7d7d7;
                padding: 2px 10px;
                margin-right: 10px;
            }
        }
        .cat-box {
            font-size: 16px;

            margin-top: 20px;
            .cat-concent {
            }
        }
        .data-num-box {
            margin-top: 20px;

            .data-num-title {
                font-size: 16px;
            }
            .data-num {
                font-size: 14px;
            }
        }
        .qr-box {
            margin-top: 20px;
            border-radius: 5px;
            border: 1px solid #d7d7d7;
            padding: 10px;
            width: 180px;
            height: 180px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
